<template>
  <el-dialog
    :visible.sync="reptileConfigDialogVisible"
    width="50%"
    :before-close="closeDialog"
    @open="open"
  >
    <span slot="title">{{ $t("reptileDialog.title.config") }}</span>
    <el-switch
      v-model="value"
      :active-text="$t('reptileDialog.form.sync')"
      :inactive-text="$t('reptileDialog.form.async')"
      @change="handler"
      :disabled="reptileType == 1 ? true : false"
    >
      <!-- :disabled="reptileRow.reptile_type" -->
    </el-switch>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="400"
      @row-click="editor"
    >
      <el-table-column
        type="index"
        width="50"
        :label="$t('reptileDialog.table.index')"
      >
      </el-table-column>
      <!-- <el-table-column prop="paramsKey" label="参数名称">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.paramsKey"
            placeholder="请输入参数名称"
            v-show="!scope.row.isKeyShow"
            @blur="scope.row.isKeyShow = true"
          ></el-input>
          <span v-show="scope.row.isKeyShow">{{ scope.row.paramsKey }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="paramsValue" label="参数值">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.paramsValue"
            placeholder="请输入参数值"
            v-show="!scope.row.isValueShow"
            @blur="scope.row.isValueShow = true"
          ></el-input>
          <span v-show="scope.row.isValueShow">{{
            scope.row.paramsValue
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="编辑" width="50px">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="编辑" placement="right">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="
                (scope.row.isKeyShow = false), (scope.row.isValueShow = false)
              "
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column> -->
      <el-table-column :label="$t('reptileDialog.table.key')" align="center">
        <template slot-scope="{ row }">
          <span v-show="!row.isEditor">{{ row.key }}</span>
          <el-input
            v-show="row.isEditor"
            v-model="row.key"
            size="small"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column :label="$t('reptileDialog.table.value')" align="center">
        <template slot-scope="{ row }">
          <span v-show="!row.isEditor">{{ row.value }}</span>
          <el-input
            v-show="row.isEditor"
            v-model="row.value"
            size="small"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column :label="$t('reptileDialog.table.del')" width="120px">
        <template slot-scope="{ row }">
          <el-button
            type="danger"
            size="mini"
            plain
            icon="el-icon-delete"
            @click="delParams(row)"
            >{{ $t("reptileDialog.table.del") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button
      icon="el-icon-circle-plus-outline"
      type="text"
      @click="addParams"
      >{{ $t("reptileDialog.btn.addParams") }}</el-button
    >
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{
        $t("reptileDialog.btn.cancel")
      }}</el-button>
      <el-button type="primary" @click="saveConfig">{{
        $t("reptileDialog.btn.save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["reptileConfigDialogVisible", "reptileRow", "reptileType"],
  data() {
    return {
      tableData: [],
      params: { key: "", value: "", isEditor: false },
      saveForm: {},
      value: true,
    };
  },
  methods: {
    handler(sw) {
      console.log(sw);
    },
    open() {
      console.log(this.reptileType);
      this.value = this.reptileType == 1 ? false : true;
      console.log(this.reptileRow);
      this.tableData =
        this.reptileRow.parameter === null
          ? []
          : JSON.parse(this.reptileRow.parameter);
      console.log(this.tableData);
    },
    // 点击行 就编辑行
    editor(row, col, e) {
      console.log(row);
      this.tableData.forEach((val) => {
        val.isEditor = false;
      });
      row.isEditor = true;
    },
    // 添加参数
    addParams() {
      this.tableData.forEach((val) => {
        val.isEditor = false;
      });
      let params = { key: "", value: "", isEditor: true };
      this.tableData.push(params);
    },
    // 删除参数
    delParams(row) {
      console.log(row);
      this.tableData.remove(row);
      console.log(this.tableData);
    },
    // 保存按钮
    async saveConfig() {
      this.tableData.forEach((val) => {
        val.isEditor = false;
      });
      let parameter = JSON.stringify(this.tableData);
      const { data: res } = await this.$http.post("/reptile/parameter", {
        id: this.reptileRow.id,
        parameter: parameter,
        is_sync: this.value,
        reptile_type: this.reptileType,
      });
      if (res.code != 0)
        return this.$message.error(
          this.$t("reptileDialog.message.configError")
        );
      this.$message.success(this.$t("reptileDialog.message.configSucc"));
      this.closeDialog("1");
    },
    // 关闭对话框
    closeDialog(val) {
      this.$emit("closeDialog", val);
    },
  },
};
</script>

<style>
</style>